import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {Router, Route, IndexRedirect, hashHistory, browserHistory} from 'react-router';
import configureStore from './store/configureStore';
import Index from './views/Index'
import Home from './views/Home';
import Login from './views/Login';
import Page2 from './views/Page2';
import Form from './views/Example/form'
import Example from './views/Example';
import api from './api';
import {syncHistoryWithStore, routerActions, routerMiddleware} from 'react-router-redux';
import {UserAuthWrapper} from 'redux-auth-wrapper';
const profile = api.get('/Login/profile');
profile.then(function (data) {
    renderTo(data);
});
function renderTo(data) {
    const store = configureStore(data);
    // Redirects to /login by default
    const UserIsAuthenticated = UserAuthWrapper({
        authSelector: state => state.system.user, // how to get the user state
        redirectAction: routerActions.replace, // the redux action to dispatch for redirect
        wrapperDisplayName: 'UserIsAuthenticated' // a nice name for this auth check
    });
    const history = syncHistoryWithStore(browserHistory, store);
    ReactDOM.render(
        <Provider store={store}>
            <div>
                <Router history={history}>
                    <Route path="/">
                        <IndexRedirect to="home"/>
                        <Route component={UserIsAuthenticated(Index)}>
                            <Route path="home" component={Home}/>
                            <Route path="example" component={Example}/>
                            <Route path="example/:id" component={Form}/>
                            <Route path="page2" component={Page2}/>
                        </Route>
                        <Route path="login" component={Login}/>
                    </Route>
                </Router>
            </div>
        </Provider>,
        document.getElementById('root')
    );
}